<template>
  <div class="conwarp">
    <div class="wrap">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fn"
            >进入</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {mapActions} from "vuex"
export default {
  created(){
    //   console.log(this.$message)
      // 把elementui上的$message方法挂载上window上，js文件和.vue文件都有window这个对象，就不存在this指向问题了
      window.$message = this.$message
      window.$router = this.$router
  },
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ]
      },
    };
  },
  methods: {
     ...mapActions({
         toLogin:"Login/toLogin"
     }),
     fn() {
        //  console.log(this.ruleForm.username)
        //  console.log(this.ruleForm.password)
         this.toLogin({
             username:this.ruleForm.username,
             password:this.ruleForm.password
         })
         
     }
  },
};
</script>

<style scoped>
.wrap {
    width: 400px;
    height: 400px;
   
}
.conwarp {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}
</style>